<template>
  <div class="toiAlarm">
    <div class="account_top">
      <div class="input_one">
        <span>厕所名称：</span>
        <a-input v-model="form1.toiletName" style="width: 75%" />
      </div>
      <div class="input_one">
        <span>设备名称：</span>
        <a-input v-model="form1.equipName" style="width: 75%" />
      </div>
      <div class="account_center">
        <a-button type="primary" @click="reload"> 重置 </a-button>
        <a-button @click="searchOne">查询</a-button>
      </div>
    </div>
    <div class="account_bottom" style="margin-top:40px">
        
        <div class="tottom_table">
            <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
            :bordered="true"
            :scroll="{ x: 'max-content' }"
            :rowKey="(record, index) => index"
            >
            </a-table>
            <a-pagination v-model="current" size="small" :pageSize="pageSize" @change="currentpage" showQuickJumper  :total="total" show-less-items style="text-align: right;margin-top: 15px;" />
        </div>
    </div>
  </div>
</template>

<script>
import {getEquipAlarmData,searchAlarmData} from '../../api'
export default {
  data() {
    return {
      form1:{
        equipName:'',
        toiletName:'',
      },
      columns:[
            {
                title: '序号',
                dataIndex: 'id',
            },
            {
                title: '名称',
                dataIndex: 'wc_name',
            },
            {
                title: '地址',
                dataIndex: 'wc_address',
            },
            {
                title: '传感器名称',
                dataIndex: 'name',
            },
            {
                title: '传感器类型',
                dataIndex: 'type',
            },
            {
                title: '报警时间',
                dataIndex: 'time',
            },
            {
                title: '创建时间',
                dataIndex: 'create_time',
            },
            {
                title: '更新时间',
                dataIndex: 'update_time',
            },
        ],
        data:[],
        current:1,
        pageSize:10,
        total:0,
    };
  },
  mounted(){
    this.getAlarms()
  },
  methods: {
    async getAlarms(){
      let page = this.current
      let page_size = this.pageSize
      let res = await getEquipAlarmData(page,page_size)
      this.total = res.count
      this.data = res.results
      this.data.map(item=>{
        item.time = item.time.replace('T',' ')
      })
    },
    currentpage(val){
        this.current = val
        this.getAlarms()
    },
    async searchOne(){
      let name1 = this.form1.toiletName
      let name2 = this.form1.equipName
      this.current = 1
      let page = this.current
      let page_size = this.pageSize
      let res = await searchAlarmData(name1,name2,page,page_size)
      this.total = res.count
      this.data = res.results
      this.data.map(item=>{
        item.time = item.time.replace('T',' ')
      })
    },
    reload(){
      this.current = 1
      this.form1 = {}
      this.getAlarms()
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
};
</script>

<style lang="less">
.toiAlarm {
  padding: 24px;
  .account_top {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    .input_one {
      width: 33.33%;
      margin: 10px 0 10px 0;
      span {
        width: 25%;
        display: inline-block;
        text-align: right;
      }
    }
    .account_center {
      margin-top: 10px;
      width: 33.33%;
      text-align: right;
    }
  }
  .account_bottom{
      .bottom_top{
          margin: 50px 0 30px 0;
      }
  }
  .table {
    :global {
      .ant-table-thead > tr > th {
        background: #fff !important;
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
      .ant-table-tbody >tr> td {
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
    }
  }
  .ss{
    span{
      width: 100%!important;
    }
  }
}
</style>